<template>
  <div class="page-table">
    <div class="grid">
      <div class="item">
        <div class="title-bar">
          <h2>城市</h2>
          <div class="op">
            <el-button size="mini" type="primary" plain @click="cityAdd">新增</el-button>
            <el-button size="mini" type="primary" plain :disabled="!citySelectedRow" @click="cityEdit()">修改</el-button>
            <el-button size="mini" type="primary" plain :disabled="!citySelectedRow" @click="cityDel">删除</el-button>
            <!-- <el-button size="mini" type="primary" plain @click="getInitCityList">刷新</el-button> -->
          </div>
        </div>
        <ad-table :data="cityList" v-loading="cityInitLoading" u-table :data-changes-scroll-top="cityIsScrollTop"
                  @row-click="citySelectRow" :searchQuery="citySearchQuery" @search="cityGetInitList"
                  @sort-change="citySortInitList" @filter-change="cityFilterInitList"
                  @table-body-scroll="cityGetMoreList" :height="tableHeight">
          <ad-table-column label="区划代码" prop="code" w="4c"/>
          <ad-table-column label="名称" prop="name" searchable sortable w="2c2f"/>
          <ad-table-column label="是否县级市" prop="hasCounty" dictName="is_county" sortable w="5c1f"/>
          <ad-table-column label="所属城市" prop="cityName" searchable/>
          <ad-table-column label="所属省份" prop="provinceName" searchable/>
          <ad-table-column width="auto"/>
        </ad-table>
      </div>
      <div class="item">
        <div class="title-bar">
          <h2>区</h2>
          <div class="op">
            <el-button size="mini" type="primary" plain :disabled="!citySelectedRow" @click="areaAdd">新增</el-button>
            <el-button size="mini" type="primary" plain :disabled="!areaSelectedRow" @click="areaEdit()">修改</el-button>
            <el-button size="mini" type="primary" plain :disabled="!areaSelectedRow" @click="areaDel">删除</el-button>
            <!-- <el-button size="mini" type="primary" plain :disabled="!selectedCityCode" @click="getInitAreaList(selectedCityCode)">刷新</el-button> -->
          </div>
        </div>
        <ad-table :data="areaList" v-loading="areaInitLoading"  @row-click="areaSelectRow">
          <ad-table-column label="区划代码" prop="code"/>
          <ad-table-column label="名称" prop="name"/>
          <ad-table-column label="所属城市" prop="cityName"/>
          <ad-table-column width="auto"/>
        </ad-table>
      </div>
    </div>

    <el-dialog title="城市" :visible.sync="cityAdder.visible" custom-class="ad-dialog">
      <city-adder :mode="cityAdder.mode" :id="citySelectedRowPk" :visible.sync="cityAdder.visible" @saved="citySaved"/>
    </el-dialog>
    <el-dialog title="区" :visible.sync="areaAdder.visible" custom-class="ad-dialog">
      <area-adder :mode="areaAdder.mode" :id="areaSelectedRowPk" :selectedCity="citySelectedRow"
                  :visible.sync="areaAdder.visible" @saved="areaSaved"/>
    </el-dialog>
  </div>
</template>

<script>
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import cityAdder from './cityAdder'
import areaAdder from './areaAdder'
import adTable from '@/mixins/adTable'
import {getList as cityApiGetList, del as cityApiDel} from '@/api/region/city'
import {getList as areaApiGetList, del as areaApiDel} from '@/api/region/area'

export default {
  name: 'system-region',
  components: {AdTable, AdTableColumn, cityAdder, areaAdder},
  dicts: ['is_county'],
  // mixins: [adTable(['city','area'])],
  mixins: [adTable([
    {name: 'city', pk: 'code'},
    {name: 'area', pk: 'code', parent: 'city'}
  ])],
  data() {
    return {
      tableHeight: document.documentElement.clientHeight - 160,
    }
  },
  created() {
    this.cityGetInitList()
  },
  // computed: {
  //   citySelectRowCode() {
  //     return this.citySelectedRow ? this.citySelectedRow.code : ''
  //   },
  //   areaSelectedRowCode() {
  //     return this.areaSelectedRow ? this.areaSelectedRow.code : ''
  //   }
  // },
  methods: {
    cityApiGetList, cityApiDel, areaApiGetList, areaApiDel,
    cityAfterSelectRow() {
      // this.areaUnSelectRow()
      this.areaGetInitList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .grid {
    display: grid;
    flex: 1;
    grid-template-columns: 60% auto;

    .item {
      display: flex;
      flex-direction: column;
    }
  }

  .grid {
    border: 1px solid #e3e3e3;

    .item:first-child {
      border-right: 4px solid #dbedfe;
    }
  }

  .title-bar {
    display: flex;
    padding: 4px 10px 4px 16px;
    align-items: center;

    h2 {
      margin-right: auto;
    }

    .op {
      display: flex;

      & > * {
        margin: 0 0 0 6px;
      }
    }
  }

  .title-bar {
    background: #f6f6f6;
    border-bottom: 1px solid #85AFD6;

    h2 {
      font-size: 12px;
      font-weight: bold;
    }
  }
</style>